<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="">
<meta name="description" content="">
<title>相似图片检索</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon1.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/bootstrap.min.css">
<!--tags插件css-->
<link type="text/css" rel="stylesheet" href="__STATIC__/admin/js/jquery-tagsinput/jquery.tagsinput.min.css">
<!--上传插件css-->
<link type="text/css" rel="stylesheet" href="__STATIC__/admin/js/webuploader/webuploader.css">
<!--灯箱效果插件css-->
<link type="text/css" rel="stylesheet" href="__STATIC__/admin/js/magnific-popup/magnific-popup.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/animate.min.css">
<!--引入下拉插件css-->
<!-- <link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/bootstrap-select/bootstrap-select.min.css"> -->
<link href="__STATIC__/common/select2/select2.css" rel="stylesheet">
<!--日期选择器css-->
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<!--时间日期选择器css-->
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/style.min.css">

<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/style.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/common/cch.css">

<style type="text/css">
/*  .btn {background-color: transparent!important;border-color: transparent!important;}*/

  .ajax-post,.webuploader-pick {background-color: transparent!important;border-color: transparent!important;padding:0;}
  .webuploader-pick-hover {
    background: #0096FF;
      background-color: transparent!important;border-color: transparent!important;
      box-shadow: 0 0 0 gray;
  }
  .more-btn {background-color: transparent!important;border-color: transparent!important;}

/*  .webuploader-pick {float: left;background-color: #df6098;border-color: #df6098;}*/
  @media (max-width: 767.98px) {
    .list-images-item {min-width: 100%;}
  }

  .page-btn {color: #ddd;font-size: 1.2em;}
  .page-active {color: #df6098!important;}

  .js-upload-images-new {float:left;}
</style>
</head>
  
<body style="background-color: #f7f7f7;">
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-lg-6">
      <div class="card">
        <header class="card-header">
          <!-- <div class="card-title">检索条件</div> -->
          <div style="text-align: center;"><img src="__STATIC__/admin/images/logo2.png" style="width:60%;max-width: 300px;" /></div>
        </header>
        <div class="card-body" style="background-color: #f7f7f7;">
          
          <a class="page-btn page-active" target="_self" href="javascript:void(0);" data-type='cn'>中</a> / <a class="page-btn" data-type='en' href="javascript:void(0)" target="_self" >EN</a>
          <form action="" method="post" class="row">
            
            <!-- <div class="mb-3 col-md-12 position-relative">
              <div class="js-upload-images-new">
                <div id="picker_image">上传检索图片</div>
                <input type="hidden" name="image" data-url="" data-multiple="false" data-ext='gif,jpg,jpeg,bmp,png,pdf,doc,docx,xls,xlsx,txt' id="image" value="">
                <ul id="file_list_image" class="list-inline row lyear-uploads-pic mb-0">
           
                </ul>
              </div>
            </div> -->

            <?php $field = 'url'; $vo = $fields[$field]; ?>
            <div class="mb-3 col-md-12 position-relative">
              <!-- <label for="{:$field}">多图上传</label> -->
              <div class="js-upload-images-new">
                <div id="picker_{:$field}">{:$vo['name']}</div>
                <input type="hidden" name="{:$field}" data-url="{:$vo['url']}" data-multiple="false" capture="camera" data-ext='gif,jpg,jpeg,bmp,png,pdf,doc,docx,xls,xlsx,txt' id="{:$field}" value="{:$value}">
                <ul id="file_list_{:$field}" class="list-inline row lyear-uploads-pic mb-0">
                  <?php if (!empty($value)): ?>
                    <li class="col-6 col-sm-3 col-md-2 list-images-item">
                      <figure>
                        <?php if (!in_array(pathinfo($value)['extension'],['gif','jpg','jpeg','bmp','png'])): ?>
                            <img src="__STATIC__/common/common_file.jpg" />
                        <?php else: ?>
                            <img src="{:$value}" />  
                        <?php endif ?>
                        <figcaption>
                          <a class="btn btn-round btn-primary btn-link-pic" href="__UPLOAD__/{:$value}"><i class="mdi mdi-eye"></i></a>
                          <a class="btn btn-round btn-danger btn-remove-pic" data-id="1"><i class="mdi mdi-delete"></i></a>
                        </figcaption>
                      </figure>
                    </li>
                  <?php endif ?>
                </ul>
              </div>
            </div>


            <!-- <div class="mb-3 col-md-12">
              <button type="button" class="btn ajax-post" target-form="add-form"><img src="{:$configs['SEARCH_IMG_CN']}" class="search-btn-img" style="width:100%;" /></button>
            </div> -->
          </form>
          
        </div>
      </div>
    </div>

    <style type="text/css">
      .result-table {text-align:left;}
      .result-table td {width:33%;padding:5px;}
      .result-table td img {width:100%;cursor:pointer;padding:0;}
      
      .result-table td div {padding:0 2px;}

      .result-table td {vertical-align:top;border:none;}

      .result-table td a {color: #df6098!important;border: 1px solid #ddd;border-radius: 5px;float: left;padding:10px;}
      .result-table td a:hover {box-shadow: 0 0 5px gray;}

      @media (max-width: 767.98px) {
        .result-table td {width:50%;padding:5px;}
      }

      .btn-xcm {border:1px solid #f968db;border-radius: 20px;background: #f968db;color: #fff;}
      .btn-xcm:hover {color: #fff;}
    </style>
    <div class="col-lg-6">
      <div class="card">
        <header class="card-header"><div class="card-title" style="color:#df6098;"><span>搜索结果</span> <button class="btn btn-primary more-btn" data-pn="0" style="float:right;display: none;">加载更多</button></div> </header>
        <div class="card-body" style="background-color: #f7f7f7;">
          
          <div class="table-responsive">
            <table class="table table-bordered result-table">

            </table>
          </div>
          <div style="text-align:center;display: none;" class="tishidiv">
            <span style="font-weight: bold;" class="tishidiv_title">为您找到以下相似产品</span><br />
            如未找到满意的产品，可点击“提交需求”，由小参谋帮您寻找合适的包<br />
材商，也可直接联系小参谋
            <p>
              <a type="button" class="btn btn-xcm" href="{:$configs['XQ_URL']}" target="_blank">提交需求</a>
              <a type="button" class="btn btn-xcm" data-bs-toggle="modal" data-bs-target="#modal-export" href="javascript:void(0)">联系小参谋</a>
            </p>
          </div>
        </div>
      </div>
    </div>
        
  </div>
  
</div>

<!--导出模板-->
<div class="modal fade bs-example-modal-lg in" tabindex="-1" id="modal-export">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">联系小参谋</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" style="text-align: center;">
        <p>截图后使用微信扫码联系小参谋</p>
        <p><img src="{:$configs['QR_IMG']}" id="qr_code" /></p>
        <div style="font-size: 1.2em;">小灵：<a href="tel:13533351815">13533351815</a></div>
      </div>
    
    </div>
  </div>
</div>


<script type="text/javascript" src="__STATIC__/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/popper.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap.min.js"></script>
<!--tags插件-->
<script type="text/javascript" src="__STATIC__/admin/js/jquery-tagsinput/jquery.tagsinput.min.js"></script>
<!--上传插件-->
<script type="text/javascript" src="__STATIC__/admin/js/webuploader/webuploader.js"></script>
<!--灯箱效果插件-->
<script type="text/javascript" src="__STATIC__/admin/js/magnific-popup/magnific-popup.min.js"></script>
<!--通知消息插件-->
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/main.min.js"></script>
<!--引入下拉插件js-->
<!-- <script type="text/javascript" src="__STATIC__/admin/js/bootstrap-select/bootstrap-select.min.js"></script> -->
<script src="__STATIC__/common/select2/select2.min.js"></script>
<!--省市选择-->
<script type="text/javascript" src="__STATIC__/common/distpicker/distpicker.data.js"></script>
<script type="text/javascript" src="__STATIC__/common/distpicker/distpicker.js"></script>
<!-- 百度编辑器 -->
<script type="text/javascript" src="__STATIC__/common/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/common/ueditor/ueditor.all.js"></script>
<!--日期选择器js-->
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--时间日期选择器js-->
<script type="text/javascript" src="__STATIC__/admin/js/momentjs/moment.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/momentjs/locale/zh-cn.min.js"></script>
<!--自定义扩展-->
<script type="text/javascript" src="__STATIC__/common/cch.js"></script>
{include file="html/jspath" /}
<script type="text/javascript">
  $(".ajax-post").on('click',function(){
    var params = $("form").serialize();
    $.ajax({
        url:'{:url("search")}',
        data:params,
        type:'post',
        dataType:'json',
        success:function(data){
          if (data.code == 2000) {
            var list = data.list;
            var str = createHtml(list);
            $('.result-table').html(str);

            if (data.pn > -1) {
              console.log(data.pn)
              $(".more-btn").show();
              $(".more-btn").attr('data-pn',data.pn);
            }
          }else{
            alert(data.msg);
          }
        }
    });
  });

  function searchSubmit(){
    var params = $("form").serialize();
    $.ajax({
        url:'{:url("search")}',
        data:params,
        type:'post',
        dataType:'json',
        success:function(data){
          if (data.code == 2000) {
            var list = data.list;
            var str = createHtml(list);
            $('.result-table').html(str);
            $(".tishidiv").show();

            if (list.length > 0) {
              $(".tishidiv_title").html('为您找到以上相似产品');
            }else{
              $(".tishidiv_title").html('没有找到相似产品');
            }

            if (data.pn > -1) {
              console.log(data.pn)
              $(".more-btn").show();
              $(".more-btn").attr('data-pn',data.pn);
            }
          }else{
            alert(data.msg);
          }
        }
    });
  }

  $(".more-btn").on('click',function(){
    $(".more-btn").html('加载中');
    $(".more-btn").prop("disabled", true);

    var params = $("form").serialize();
    params = params += '&pn='+$(this).attr('data-pn');
    $.ajax({
        url:'{:url("search")}',
        data:params,
        type:'post',
        dataType:'json',
        success:function(data){
          $(".more-btn").html('加载更多');
          $(".more-btn").prop("disabled", false);

          if (data.code == 2000) {
            var list = data.list;
            var str = createHtml(list);
            $('.result-table').append(str);

            if (data.pn > -1) {
              $(".more-btn").show();
              $(".more-btn").attr('data-pn',data.pn);
            }
          }else{
            alert(data.msg);
          }
        }
    });
  });



  

  function createHtml(list){
    if (isMobileUagent()) {
      var rowmax = 2;
      var rownum = 2;
    }else{
      var rowmax = 3;
      var rownum = 3;
    }
    

    var str = '';
    if (g_page_type == 'en') {
      var lables = ['filename','tags','params','score'];
    }else{
      var lables = ['文件名','标签','参数','图片相关性'];
    }

    for(var i in list){
      if (rownum == rowmax) {
        str += '<tr>';
      }
      if (list[i]['image']['has_url'] == 1) {
        str += '<td>'+
                '<a href="'+list[i]['image']['url']+'" target="_blank">'+
                  '<img src="'+list[i]['image']['image']+'" />'+
                  // '<div>'+lables[0]+'：'+list[i]['image']['name']+'</div>'+
                  // '<div>'+lables[1]+'：'+list[i]['image']['tags']+'</div>'+
                  // '<div>'+lables[2]+'：'+list[i]['image']['brief']+'</div>'+
                  '<div>'+list[i]['image']['name']+'</div>'+
                  '<div>'+list[i]['image']['tags']+'</div>'+
                  '<div>'+list[i]['image']['brief']+'</div>'+
                  // '<div>'+lables[3]+'：'+list[i]['score']+'</div>'+
                '</a>'+
              '</td>';
        }else{
          str += '<td>'+
                  '<img src="'+list[i]['image']['image']+'" />'+
                  // '<div>'+lables[0]+'：'+list[i]['image']['name']+'</div>'+
                  // '<div>'+lables[1]+'：'+list[i]['image']['tags']+'</div>'+
                  // '<div>'+lables[2]+'：'+list[i]['image']['brief']+'</div>'+
                  '<div>'+list[i]['image']['name']+'</div>'+
                  '<div>'+list[i]['image']['tags']+'</div>'+
                  '<div>'+list[i]['image']['brief']+'</div>'+
                  // '<div>'+lables[3]+'：'+list[i]['score']+'</div>'+
              '</td>';
        }
      

      rownum--;
      if (rownum == 0) {
        str += '</tr>';
        rownum = rowmax;
      }        
    }
    while(rownum != rowmax && rownum != 0){
      str += '<td></td>';
      rownum--;
    }

    if (str.slice(-5) != '</tr>') {
      str += '</tr>';
    }

    return str;
  }
</script>

<script type="text/javascript">

  var g_page_type = 'cn';

  $(".page-btn").on('click',function(){
    $(".page-btn").attr('class','page-btn');
    $(this).attr('class','page-btn page-active');

    var upload_cn = '{:$configs["UPLOAD_IMG_CN"]}';
    var upload_en = '{:$configs["UPLOAD_IMG_EN"]}';
    var search_cn = '{:$configs["SEARCH_IMG_CN"]}';
    var search_en = '{:$configs["SEARCH_IMG_EN"]}';

    g_page_type = $(this).attr('data-type');

    if (g_page_type == 'cn') {
      $(".upload-btn-img").attr('src',upload_cn);
      $(".search-btn-img").attr('src',search_cn);
      $(".card-title").find('span').html('搜索结果');
    }else{
      $(".upload-btn-img").attr('src',upload_en);
      $(".search-btn-img").attr('src',search_en);
      $(".card-title").find('span').html('Search Result');
    }
  });


  $(".js-upload-images-new").on('mouseover',function(){
    var upload_cn = '{:$configs["UPLOAD_IMG_HOVER_CN"]}';
    var upload_en = '{:$configs["UPLOAD_IMG_HOVER_EN"]}';
    var search_cn = '{:$configs["SEARCH_IMG_HOVER_CN"]}';
    var search_en = '{:$configs["SEARCH_IMG_HOVER_EN"]}';

    if (g_page_type == 'cn') {
      $(".upload-btn-img").attr('src',upload_cn);
    }else{
      $(".upload-btn-img").attr('src',upload_en);
    }
  });

  $(".js-upload-images-new").on('mouseout',function(){
    var upload_cn = '{:$configs["UPLOAD_IMG_CN"]}';
    var upload_en = '{:$configs["UPLOAD_IMG_EN"]}';
    var search_cn = '{:$configs["SEARCH_IMG_CN"]}';
    var search_en = '{:$configs["SEARCH_IMG_EN"]}';

    if (g_page_type == 'cn') {
      $(".upload-btn-img").attr('src',upload_cn);
    }else{
      $(".upload-btn-img").attr('src',upload_en);
    }
  });

  $(".js-upload-images-new").on('touchend',function(){
    var upload_cn = '{:$configs["UPLOAD_IMG_CN"]}';
    var upload_en = '{:$configs["UPLOAD_IMG_EN"]}';
    var search_cn = '{:$configs["SEARCH_IMG_CN"]}';
    var search_en = '{:$configs["SEARCH_IMG_EN"]}';

    if (g_page_type == 'cn') {
      $(".upload-btn-img").attr('src',upload_cn);
    }else{
      $(".upload-btn-img").attr('src',upload_en);
    }
  });

  $(".search-btn-img").on('mouseover',function(){
    var upload_cn = '{:$configs["UPLOAD_IMG_HOVER_CN"]}';
    var upload_en = '{:$configs["UPLOAD_IMG_HOVER_EN"]}';
    var search_cn = '{:$configs["SEARCH_IMG_HOVER_CN"]}';
    var search_en = '{:$configs["SEARCH_IMG_HOVER_EN"]}';

    if (g_page_type == 'cn') {
      $(".search-btn-img").attr('src',search_cn);
    }else{
      $(".search-btn-img").attr('src',search_en);
    }
  });

  $(".search-btn-img").on('mouseout',function(){
    var upload_cn = '{:$configs["UPLOAD_IMG_CN"]}';
    var upload_en = '{:$configs["UPLOAD_IMG_EN"]}';
    var search_cn = '{:$configs["SEARCH_IMG_CN"]}';
    var search_en = '{:$configs["SEARCH_IMG_EN"]}';

    if (g_page_type == 'cn') {
      $(".search-btn-img").attr('src',search_cn);
    }else{
      $(".search-btn-img").attr('src',search_en);
    }
  });

  $(".search-btn-img").on('touchend',function(){
    var upload_cn = '{:$configs["UPLOAD_IMG_CN"]}';
    var upload_en = '{:$configs["UPLOAD_IMG_EN"]}';
    var search_cn = '{:$configs["SEARCH_IMG_CN"]}';
    var search_en = '{:$configs["SEARCH_IMG_EN"]}';

    if (g_page_type == 'cn') {
      $(".search-btn-img").attr('src',search_cn);
    }else{
      $(".search-btn-img").attr('src',search_en);
    }
  });


</script>

<script type="text/javascript">
  // 图片上传(单张图片，多张图片)
    $('.js-upload-image,.js-upload-images-new').each(function() {
        var $input_file      = $(this).find('input'),
            $input_file_name = $input_file.attr('name'),
            $multiple        = $input_file.data('multiple'),  // 是否选择多个文件
            $ext             = $input_file.data('ext'),       // 支持的文件后缀，示例以图片为例
            $size            = $input_file.data('size');      // 支持最大的文件大小

        var server_url = $($input_file).attr('data-url');
        if (server_url == null || server_url == '') {
            server_url = '/index.php/admin/base/upload';
        }

        var $file_list = $('#file_list_' + $input_file_name);
        var ratio = window.devicePixelRatio || 1;
        var thumbnailWidth = 125 * ratio;
        var thumbnailHeight = 110 * ratio;
        var uploader = WebUploader.create({
            auto: true,
            duplicate: true,
            resize: false,
            swf: static_path + '/admin/js/webuploader/Uploader.swf',
            server: server_url,
            pick: {
                id: '#picker_' + $input_file_name,
                multiple: $multiple
            },
            // fileSingleSizeLimit: $size,
            accept: {
                // title: 'Images',
                extensions: $ext,
                // mimeTypes: 'image/*'
            }
        });
        
        uploader.on('fileQueued', function(file) {
            
            var $li = $('<li class="col-6 col-sm-3 col-md-4 list-images-item" id="' + file.id + '">' +
                        '  <figure>' +
                        '    <img>' +
                        '    <figcaption>' +
                        '      <a class="btn btn-round btn-primary btn-link-pic" href="#!"><i class="mdi mdi-eye"></i></a>' +
                        '      <a class="btn btn-round btn-danger btn-remove-pic" href="#!"><i class="mdi mdi-delete"></i></a>' +
                        '    </figcaption>' +
                        '  </figure>' +
                        '</li>'),
                $img = $li.find('img');
            
            if ($multiple) {
                $file_list.append($li);
            } else {
                $file_list.html($li);
                $input_file.val('');
            }
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    if (['pdf','doc','docx','xls','xlsx','txt'].indexOf(file.ext) > -1) {
                        $img.attr('src', static_path+'/common/common_file.jpg');
                    }else{
                        $img.replaceWith('<span>不能预览</span>');
                    }
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            $('<div class="progress progress-sm"><div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>').appendTo($li);
        });
        uploader.on('uploadProgress', function(file, percentage) {
            var $percent = $('#' + file.id).find('.progress-bar');
            $percent.css('width', percentage * 100 + '%');
        });
        uploader.on('uploadSuccess', function(file, response) {
            var $li = $('#' + file.id);
            if (response.code == '2000') {
                if ($multiple) {
                    if ($input_file.val()) {
                        $input_file.val($input_file.val() + ',' + response.savename);
                    } else {
                        $input_file.val(response.savename);
                    }
                    $li.find('.btn-remove-pic').attr('data-id', response.savename);
                } else {
                    $input_file.val(response.savename);
                }
            }
            $('<div class="' + response.class + ' success"></div>').text(response.msg).appendTo($li);
            $li.find('a.btn-link-pic').attr('href', response.savename);
            // 提交搜索
            searchSubmit();
        });
        uploader.on('uploadError', function(file) {
            var $li = $('#' + file.id);
            $('<div class="bg-danger error">上传失败</div>').appendTo($li);
        });
        uploader.on('error', function(type) {
            switch (type) {
            case 'Q_TYPE_DENIED':
                //alert('图片类型不正确，只允许上传后缀名为：' + $ext + '，请重新上传！');
                showNotify('文件类型不正确，只允许上传后缀名为：' + $ext + '，请重新上传！', 'danger', 1500);
                break;
            case 'F_EXCEED_SIZE':
                //alert('图片不得超过' + ($size / 1024) + 'kb，请重新上传！');
                showNotify('文件不得超过' + ($size / 1024) + 'kb，请重新上传！', 'danger', 1500);
                break;
            }
        });
        uploader.on('uploadComplete', function(file) {
            setTimeout(function() {
                $('#' + file.id).find('.progress').remove();
            }, 500);
        });
        // 删除操作
        $file_list.delegate('.btn-remove-pic', 'click', function() {
            if (confirm("你确认要删除该图片吗?")) { // 可改为对话框插件
                if ($multiple) {
                    var id = $(this).data('id'),
                    ids = $input_file.val().split(',');
                    if (id) {
                        for (var i = 0; i < ids.length; i++) {
                            if (ids[i] == id) {
                                ids.splice(i, 1);
                                break;
                            }
                        }
                        $input_file.val(ids.join(','));
                    }
                } else {
                    $input_file.val('');
                }
                $(this).closest('.list-images-item').remove();
            }
        });
        // 接入图片查看插件
        $(this).magnificPopup({
            delegate: 'a.btn-link-pic',
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
  

</script>

</body>
</html>